<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三次方贝塞尔曲线</title>
</head>
<body>
<canvas id="canvas" height="400" width="800"></canvas>
</body>
<script>
    'use strict';

    let canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d'),
        endPoints = [{x:130,y:70},{x:430,y:270}],
        controlPoints = [{x:130,y:250},{x:450,y:70}];

    //Function……

    /**
     * 画网格线
     * @param color
     * @param stepX
     * @param steoY
     */
    function drawGrid(color,stepX,stepY) {
        context.save();

        context.shadowColor = undefined;
        context.shadowOffsetX = 0;
        context.shadowOffsetY = 0;

        context.strokeStyle = color;
        context.fillStyle = '#ffffff';
        context.lineWidth = 0.5;
        context.fillRect(0, 0, context.canvas.width,
            context.canvas.height);

        for (var i = stepX + 0.5;
             i < context.canvas.width; i += stepX) {
            context.beginPath();
            context.moveTo(i, 0);
            context.lineTo(i, context.canvas.height);
            context.stroke();
        }

        for (var i = stepY + 0.5;
             i < context.canvas.height; i += stepY) {
            context.beginPath();
            context.moveTo(0, i);
            context.lineTo(context.canvas.width, i);
            context.stroke();
        }

        context.restore();
    }



    /**
     * 贝塞尔曲线
     */
    function drawBezierCurve() {
        context.strokeStyle = 'blue';

        context.beginPath();
        context.moveTo(endPoints[0].x,endPoints[0].y);
        context.bezierCurveTo(controlPoints[0].x,controlPoints[0].y,controlPoints[1].x,controlPoints[1].y,endPoints[1].x,endPoints[1].y);
        context.stroke();
    }

    /**
     * 绘制锚点
     */
    function drawEndPoints() {
        context.strokeStyle='blue';
        context.fillStyle='red';

        endPoints.forEach(
            function (point) {
                context.beginPath();
                context.arc(point.x,point.y,5,0,Math.PI*2,false);
                context.stroke();
                context.fill();
            }
        );
    }

    /**
     * 绘制控制点
     */
    function drawControlPoints() {
        context.strokeStyle='yellow';
        context.fillStyle='blue';

        controlPoints.forEach(
            function (point) {
                context.beginPath();
                context.arc(point.x,point.y,5,0,Math.PI*2,false);
                context.stroke();
                context.fill();
            }
        );
    }

    //Init……
    drawGrid('lightgray',10,10);

    drawControlPoints();
    drawEndPoints();
    drawBezierCurve();
</script>
</html>